<template>
  <div class="w-full h-screen px-60 mx-auto bg-[#5D5098]" id="div-1">
    <a-flex vertical="column" class="!bordr-0 pb-4 bg-[#fff]" id="a-flex-1">
      <a-row class="!mx-0 pb-3" :gutter="20" id="a-row-1">
        <a-col :span="11" class="!pl-0" id="a-col-1">
          <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-1">
            <a-image width="100%" class="!h-[400px]" src="https://picsum.photos/id/11/1000/800" :preview="false" id="a-image-1" />
            <a-typography-paragraph
              class="!mb-0 absolute bottom-0 inset-x-0 bg-black/30 text-white pt-1 pl-3 pb-1 text-lg"
              id="a-typography-paragraph-1"
            >
              自然声DAC-2换胆记
            </a-typography-paragraph>
          </a-typography-link>
        </a-col>
        <a-col :span="13" id="a-col-2">
          <a-flex vertical="column" class="my-[20px]" id="a-flex-2">
            <a-typography-title :level="5" class="!text-[#5D5098]" id="a-typography-title-1"
              >专业全能，飞傲 FIO 串流解码一体机S15正式上市!</a-typography-title
            >
            <a-typography-paragraph
              class="text-[12px] text-[#A8ACA7] overflow-hidden text-ellipsis mt-[20px] !m-0"
              :ellipsis="{ rows: 1 }"
              id="a-typography-paragraph-2"
              >[专业全能，飞傲 FII0 串流解码一体机S15正式上市][从设计到音质:艾索洛Eversol0 DMP-A6 Gen2数播</a-typography-paragraph
            >
          </a-flex>
          <a-list :data-source="list1" id="a-list-1">
            <template #renderItem="{ item, index }">
              <a-list-item class="!px-0 !border-0" :id="`a-list-item-1-${index}`">
                <a-typography-link href="#" class="!text-[#999] !flex items-center" :id="`a-typography-link-2-${index}`">
                  <a-typography-text
                    class="px-2 py-1 bg-[#E5E7E7] text-[12px] text-[#918F86]"
                    :id="`a-typography-text-1-${index}`"
                    :ellipsis="{ rows: 1 }"
                    >{{ item.indexLable }}</a-typography-text
                  >
                  <a-typography-text class="pl-2 text-[#918F86]" :id="`a-typography-text-2-${index}`" :ellipsis="{ rows: 1 }">{{
                    item.title
                  }}</a-typography-text>
                </a-typography-link>
              </a-list-item>
            </template>
          </a-list>
        </a-col>
      </a-row>
      <a-row id="a-row-2" class="!m-0" :gutter="20">
        <a-col :span="12" id="a-col-3">
          <a-typography-link href="#" id="a-typography-link-3">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/22/1000/200" :preview="false" id="a-image-2" />
          </a-typography-link>
        </a-col>
        <a-col :span="12" id="a-col-4">
          <a-typography-link href="#" id="a-typography-link-4">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/33/1000/200" :preview="false" id="a-image-3" />
          </a-typography-link>
        </a-col>
      </a-row>
    </a-flex>
  </div>
</template>

<script setup lang="jsx">
const list1 = [
  {
    title: '流媒体本地播放解码耳放一体机，飞做K17正式上市!',
    date: '03-03',
    index: 1,
    indexLable: '资讯',
  },
  {
    title: '很大的惊喜--千元机 飞微t1pro',
    date: '02-25',
    index: 2,
    indexLable: '台式系统',
  },
  {
    title: '最近办公室多了个山灵S0小音箱，感觉不错',
    date: '02-21',
    index: 3,
    indexLable: '论坛精选',
  },
  {
    title: '全面升级--Innuos音若思新一代数播ZEN NG/ZENith NG',
    date: '02-21',
    index: 4,
    indexLable: '资讯',
  },
  {
    title: '我踩坑了，买了对假的世霸小情人，与大家分享',
    date: '02-21',
    index: 5,
    indexLable: '资讯',
  },
  {
    title: '从设计到音质:艾索洛Eversolo DMP-A6 Gen2数播解码一体机全新上市',
    date: '02-21',
    index: 6,
    indexLable: '资讯',
  },
];
</script>
<style></style>
